<template>
  <div class="center-setting publicServe">
    <Side
      :menuList="menuList"
      @sideMenuClick="sideMenuClick"
      :selectKeys="selectKeys"
    ></Side>
    <TitleCard
      :title="title"
      :showMore="false"
      :loading="loading"
      :isEmpty="isEmpty"
      :isSwitch="false"
      :type="'threeCard'"
      class="publicServe-body"
    >
      <div class="publicServe-contnet">
        <component
          :data="content.data"
          :is="curComponents"
          @switchForm="handleSwitch"
        />
      </div>
    </TitleCard>
  </div>
</template>

<script>
import Side from '@/views/components/side'
import { menuList, nameMap, allTitleMap } from './config.js'
import Brief from '../components/brief.vue'
import BrandDown from './pages/brandDown.vue'
import BrandGuid from './pages/brandGuid.vue'
import filingQuery from './pages/filingQuery.vue'
import agentQuery from './pages/agentQuery.vue'
import mixinsBackStack from '@/views/backstageSupport/mixins'
import { getContent, getLink } from '@/api/frontCommon'

export default {
  mixins: [mixinsBackStack],
  data() {
    return {
      loading: false,
      isEmpty: false,
      menuList,
      nameMap,
      allTitleMap,
      curComponents: '',
      title: '窗口业务简介',
      selectKeys: [],
      id: '',
      content: {},
      link: {}
    }
  },
  components: {
    Side,
    Brief,
    BrandDown,
    BrandGuid,
    filingQuery,
    agentQuery
  },
  mounted() {
    //刷新页面时响应
    const { toComponent } = this.$route.query
    this.initSelectKeys(toComponent) //对应更新menu的select值
    this.sideMenuClick(toComponent)
  },
  watch: {
    $route: {
      handler: function (val) {
        //菜单点击响应 因为mounted不更新
        const { toComponent, fromMenu } = val.query
        if (fromMenu) {
          this.initSelectKeys(toComponent) //对应更新menu的select值
          this.sideMenuClick(toComponent)
        }
      },
      // 深度观察监听 
      deep: true
    }
  },
  methods: {
    initSelectKeys(key) {
      if (!key) return
      if (nameMap[key]) {  //有多级菜单情况
        const parent = nameMap[key]
        this.selectKeys = [...parent, key]
      } else {
        this.selectKeys = [key]  //有一级菜单情况
      }
    },
    sideMenuClick(key) {
      this.$router.push({ name: 'publicServe', query: { toComponent: key } }) //记录菜单点击
      this.allTitleMap.forEach(item => {  //更新对应选项的title值
        if (item.child) {
          item.child.forEach(ele => {
            if (ele.value === key) {
              ele.value === 'caseSub' ? '' : this.title = ele.title
              this.id = ele.id
            }
          })
        } else if (item.value === key) {
          key === 'thinkSub' || key === 'caseSub' ? '' : this.title = item.title //截停title赋值
          this.id = item.id
        }
      })
      this.handleSwitch(key, this.id)
    },
    async handleSwitch(type, id) {
      switch (type) {
        case 'brandGuid':
          this.curComponents = 'BrandGuid'
          break
        case 'brandDown':
          this.curComponents = 'BrandDown'
          break
        case 'thinkSub':
          this.link = await getLink(id)
          window.open(this.link.data.link)
          break
        case 'caseSub':
          // this.$router.push({ name: 'patentPreAudit' })
          window.open('https://cnippc.cn')
          break
        case 'filingQuery':
          this.curComponents = 'filingQuery'
          break
        case 'agentQuery':
          this.curComponents = 'agentQuery'
          break
        default:
          this.content = await getContent(id)
          this.curComponents = 'Brief'
          break
      }
    }
  }
}
</script>
